<template>
  <view>
    <view class="componets-search">
      <search></search>
    </view>
    <view class="scroll-view-container">
      <!-- 左侧滚动区 -->
      <scroll-view scroll-y="true" :style="{ height : windowHeight + 'px'}" class="scroll-view-left">
        <block v-for="(item,i) in cateList" :key="i">
          <view :class="['scroll-view-left-item', i === checked ? 'checked' : '']" @click="setChecked(i)">
            {{ item.cat_name }}
          </view>
        </block>
      </scroll-view>
      <!-- 右侧分类区 -->
      <scroll-view scroll-y="true" :style="{ height : windowHeight + 'px'}" class="scroll-view-right">
        <!-- 二级分类区 -->
        <view v-for="item in cateList2" :key="item.cat_id" class="scroll-view-right-2-item">
          <view class="scroll-view-right-2-title">
            {{item.cat_name}}
          </view>
          <!-- 三级分类区 -->
          <view class="scroll-view-right-3">
            <view class="scroll-view-right-3-item" v-for="item2 in item.children" @click="gotoGoodsList(item2)">
              <image :src="item2.cat_icon.replace(/dev/,'web')"></img>
              <text> {{item2.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  import search from '@/componets/search/search.vue'
  export default {
    data() {
      return {
        // 分类数据
        cateList: [],
        // 可用窗口高度
        windowHeight: 0,
        // 选中的一级分类的 id
        checked: 0,
        // 首页二级分类数据
        cateList2: [],
      };
    },
    methods: {
      // 获取分类数据
      async getCate() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/categories')
        if (res.meta.status !== 200) return uni.$showMsg
        this.cateList = res.message
        this.cateList2 = res.message[0].children
      },
      // 列表的点击状态
      setChecked(i) {
        // 一级点击状态
        this.checked = i
        // 二级点击状态
        this.cateList2 = this.cateList[i].children
      },
      // 跳转到商品列表区
      gotoGoodsList(item2) {
        uni.navigateTo({
          url: '/subpkg/goods-list/goods-list?cid=' + item2.cat_id
        })
      }
    },
    components: {
      search
    },
    onLoad() {
      this.getCate()
      // 获取屏幕可用高度
      this.windowHeight = uni.getSystemInfoSync().windowHeight - 50
    },
    mixins: [badgeMix]
  }
</script>

<style lang="less">
  .componets-search {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .scroll-view-container {
    display: flex;

    .scroll-view-left {
      width: 120px
    }

    .scroll-view-left-item {
      height: 120rpx;
      line-height: 120rpx;
      font-size: 12px;
      text-align: center;
      position: relative;
    }

    .checked::before {
      content: '';
      display: block;
      width: 5px;
      height: 18px;
      background-color: #bfa;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }

    .scroll-view-right-2-title {
      font-size: 12px;
      text-align: center;
      padding: 10rpx;
    }

    .scroll-view-right-3 {
      display: flex;
      flex-wrap: wrap;

      .scroll-view-right-3-item {
        display: flex;
        flex-direction: column;
        width: 33.3%;
        font-size: 12px;
        text-align: center;
        align-items: center;
        margin: 10rpx 0;
      }

      image {
        width: 60px;
        height: 60px;
        // background-color: pink;
        margin-bottom: 5rpx;
      }
    }

  }
</style>
